import { Component } from 'react'
import router from 'umi/router'
import { RouteComponentProps } from 'react-router'
import { BackTop, Icon, Layout, Menu } from 'antd'
import { ApolloProvider } from 'react-apollo'
import { client } from '../apollo'
import styles from './index.css'

const { Content, Header, Sider } = Layout

interface Props extends RouteComponentProps<never> {}

export default (props: Props) => (
  <ApolloProvider client={client}>
    <MainLayout {...props} />
  </ApolloProvider>
)

export class MainLayout extends Component<Props> {
  state = { collapsed: false }

  toggle = () => this.setState({ collapsed: !this.state.collapsed })

  render = () =>
    (({ location, children, ...props }) => (
      <Layout>
        {/* tslint:disable-next-line: no-null-keyword */}
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className={styles.logo} />
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={[
              (location.pathname.match(/^\/[^\/]*/) || [])[0],
            ]}
            onClick={({ key }) => router.push(key)}
          >
            <Menu.Item key="/">
              <Icon type="dashboard" />
              <span>Dashboard</span>
            </Menu.Item>
            <Menu.Item key="/items">
              <Icon type="table" />
              <span>Items</span>
            </Menu.Item>
            <Menu.Item key="/orders">
              <Icon type="profile" />
              <span>Orders</span>
            </Menu.Item>
            <Menu.Item key="/users">
              <Icon type="user" />
              <span>Users</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: 'white', padding: 0 }}>
            <Icon
              className={styles.trigger}
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content
            style={{
              margin: 24,
              padding: 24,
              minHeight: window.innerHeight - 112,
              background: 'white',
            }}
          >
            {children}
          </Content>
        </Layout>
        <BackTop />
      </Layout>
    ))(this.props)
}
